<template>
<div style="height: 100%">
  <el-container style="height: 100%">
  <el-aside style="height: 100%;width: 200pxpx">
    <Menu ></Menu>
  </el-aside>
  <el-main style="height: 100%;padding: 30px">
    <h1>消息发送</h1>
    <el-input
          style="width:99% "
          type="textarea"
          :rows="10"
          placeholder="请输入内容"
          v-model="notic">
    </el-input>
     <el-col :span="3">
     <el-autocomplete
         style="margin-top: 20px"
          class="inline-input"
          v-model="user_id"
          :fetch-suggestions="querySearch"
          placeholder="请选择用户"
          @select="handleSelect"
        >
        <template slot-scope="{ item }">
        <div style="color: #0a2d8f"><strong>用户名：{{item.username}}</strong></div>
        <span style="color: gray;font-size: xx-small">【ID: {{item.id}}】</span>
        <el-divider></el-divider>
        </template>
     </el-autocomplete>
    </el-col>

    <el-button type="primary" @click="send_news" style="float:left ;margin-top: 20px;margin-left: 20px">发送</el-button>

    <el-card class="box-card" style="/*overflow-y: auto;*/width: 99%;min-height: -webkit-calc(100% - 380px);margin-top: 75px">
              <div slot="header" class="clearfix">
                <span>历史消息</span>
              </div>
                <div v-for="o in news" class="text item">
                    <span style="color: gray">发送者：【 {{o.from_user_name}} 】</span>
                    <span style="color: #8c939d;font-size: xx-small">（{{o.date}}）</span>
                    <br><br>
                    <strong>{{o.content}}</strong>
                    <el-divider></el-divider>
                </div>
            </el-card>

  </el-main>
    </el-container>
</div>
</template>

<script>
import Menu from '../components/Menu'
import axios from "axios";
export default {
  name: "send_notic",
  data () {
    return{
      notic:'',
      restaurants: [],
      user_id: '',
      to_user_list:[],
      to_user_id:'',
      news:[],
    }
  },
  mounted() {
    this.restaurants = this.loadAll();

      axios.get('http://localhost:8000/get_to_user_list/').then(res=>{
                this.to_user_list = res.data.to_user_list;
                this.news = res.data.news;
                this.restaurants = this.loadAll();
            });
},
  methods:{
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return this.to_user_list;
      },
      handleSelect(item) {
        this.to_user_id=item.id;
      },
    send_news() {
      axios.post('http://localhost:8000/send_news/',{'notic':this.notic,'to_user_id':this.to_user_id}).then(res=>{/*{
        if (this.notic.length === 0) {
            alert("该项不能为空");
        }
      }*/
        this.$message({
          message:'发送成功',
          type:"success"
        })
      })
    }
  },
  components:{
    Menu,
  }
}
</script>

<style >


</style>